<template>
    <div class="box box12 shift" @touchend="handleTouchEnd">

        <div @click="goBack" class="image-1"></div>
        <img class="image" @click="btn1" :src="wechat1" alt="">
        <div class="text1">
            <!-- <span v-if="block">**蓉</span>
            <span v-else>沈蓉容</span> -->
            <!-- <span v-if="block">*岩</span>
            <span v-else>张岩</span> -->
            <span v-if="block">*杰</span>
            <span v-else>宋静杰</span>
        </div>
        <div class="text2">
            <!-- <span v-if="block">*****************0922</span> -->
            <span v-if="block">*****************1392</span>
            <span v-else>{{ zhenjian }}</span>
        </div>
        <div class="text3">
            <span>宁波市鄞州区民政局婚姻登记处</span>
            <span></span>
        </div>
        <div class="text4">
            <span>2023-07-12</span>
            <!-- 岩 -->
            <!-- <span>2011-05-09</span> -->
        </div>
        <div class="eye" @click="chulai">
            <img class="eyes2" :src="eyes" alt="" v-show="block">
            <img class="eyes1" :src="eyes1" alt="" v-show="!block">
        </div>
    </div>
</template>
<script>
/* global plus */
export default {
    name: 'BoxEleven',
    data() {
        return {
            // zhenjian: 'BL330212-2024-000922'
            // 蓉
            // zhenjian: 'L330212-2023-003885'
            // 岩
            zhenjian: 'L330212-2023-001392'
            // 杰
        }


    },
    mounted() {
        document.addEventListener('plusready', this.handleBackButton);
        // 设置沉浸式状态栏：深色文字、浅色背景
        this.setStatusBarDark()
        document.addEventListener('plusready', this.handlePlusReady)
    },
    methods: {
        handleBackButton() {
            if (typeof plus !== 'undefined' && plus.key) {
                plus.key.addEventListener('backbutton', () => {
                    if (this.$route.path !== '/box1') {
                        this.$router.push('/box11');
                    } else {
                        if (confirm('再按一次退出应用')) {
                            plus.runtime.quit();
                        }
                    }
                });
            }
        },
        handlePlusReady() {
            this.setStatusBarDark()
        },
        setStatusBarDark() {
            if (typeof plus !== 'undefined' && plus.navigator) {
                try {
                    plus.navigator.setStatusBarStyle('dark')
                    plus.navigator.setStatusBarBackground('#ffffff')
                } catch (e) { console.warn('BoxThirteen setStatusBarDark failed', e) }
            }
        },
        restoreStatusBarDefault() {
            if (typeof plus !== 'undefined' && plus.navigator) {
                try {
                    plus.navigator.setStatusBarStyle('light')
                    plus.navigator.setStatusBarBackground('#00000000')
                } catch (e) { console.warn('BoxThirteen restoreStatusBarDefault failed', e) }
            }
        }
    },
    beforeUnmount() {
        document.removeEventListener('plusready', this.handleBackButton);
        document.removeEventListener('plusready', this.handlePlusReady);
        this.restoreStatusBarDefault()
    }
}
</script>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import wechat1 from '@/assets/img/box13a.jpg'
import eyes from '@/assets/img/eye1.png'
import eyes1 from '@/assets/img/eye2.png'
const router = useRouter()
const block = ref(true)

function btn1() {
    console.log(66666)
    router.push('/box14')
}
function goBack() {
    console.log(66666)
    router.push({
        path: '/box10',
    })
}
function chulai() {
    block.value = !block.value;
}

// 滑动切换
// let startX = 0, startY = 0
// function handleTouchStart(e) {
//     startX = e.touches[0].clientX
//     startY = e.touches[0].clientY
// }
// function handleTouchEnd(e) {
//     const endX = e.changedTouches[0].clientX
//     const endY = e.changedTouches[0].clientY
//     const deltaX = endX - startX
//     const deltaY = endY - startY
//     if (Math.abs(deltaX) > 50 && Math.abs(deltaY) < 30) {
//         if (deltaX > 0) {
//             router.push('/box15')
//         } else {
//             router.push('/box14')
//         }
//     }
//     // 否则不做任何跳转，让click事件生效
// }
// #ifdef APP-PLUS
// #endif
</script>

<style scoped>
span {
    font-weight: normal !important;
}

.eye {
    position: absolute;
    top: 182.597px;
    left: 110px;
    z-index: 1000;
}

.eyes2 {
    width: 33.2677px;
    height: auto;
}

.eyes1 {
    width: 33.2677px;
    height: auto;
}

.text1 {
    top: 185.13333px;
    left: 70.8274px;
    position: absolute;
    z-index: 99;
    font-size: 14px;
    color: #f6f6e7;
    /* font-family: "FZKai-Z03", "KaiTi", "楷体", "STKaiti", serif; */
    font-weight: bolder;
}

.text3 {
    top: 230.4px;
    left: 124px;
    position: absolute;
    z-index: 99;
    font-size: 14px;
    color: #f6f6e7;
    /* font-family: "FZKai-Z03", "KaiTi", "楷体", "STKaiti", serif; */
    font-weight: bolder;
}

.text2 {
    top: 209.724px;
    left: 81.5435px;
    /* left: 68.8274px; */
    position: absolute;
    z-index: 99;
    font-size: 14px;
    color: #f6f6e7;
    /* font-family: "FZKai-Z03", "KaiTi", "楷体", "STKaiti", serif; */
    font-weight: bolder;
}

.text4 {
    font-size: 14px;
    color: #f6f6e7;
    top: 257.386px;
    left: 125.107px;
    position: absolute;
    z-index: 99;
    font-weight: bolder;
}

.shift {
    position: relative;
    top: 5px;
    left: 5px;
}

.image-1 {

    position: absolute;
    width: 20px;
    height: 20px;
    /* background-color: pink; */
    opacity: 0.1;
    top: 55px;
    left: 15px;
    z-index: 99;
}

.box {
    /* width: 375px */
    height: 100vh;
    /* position: relative; */
    overflow: hidden;
}

.image {

    /* position: absolute; */
    z-index: 100;
    width: 375px;
    transform: translateY(-20px);

}

.image-1 {
    position: absolute;
    width: 20px;
    height: 20px;
    /* background-color: rgb(50, 44, 45); */
    opacity: 0.1;
    top: 36px;
    left: 15px;
    z-index: 999;
}
</style>